import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { NotFoundComponent } from './not-found/not-found.component'
import { ChildAComponent } from './child-a/child-a.component'
import { ChildBComponent } from './child-b/child-b.component'
import { HomeComponent } from './home/home.component'

const routes: Routes = [
  {
    path: 'first-component/:id',
    component: FirstComponent,
    children: [
      {
        path: 'child-a', // child route path
        component: ChildAComponent, // child route component that the router renders
      },
      {
        path: 'child-b',
        component: ChildBComponent, // another child route component that the router renders
      },
      {
        path: '',
        redirectTo: 'child-a',
        pathMatch: 'full'
      }
    ],
  },
  { path: 'second-component', component: SecondComponent },
  { path: 'home', component: HomeComponent },
  // 重定向
  { path: '', redirectTo: '/second-component', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}
